<template>
  <div class="sign_record" v-if="sign_record">
    <div
      class="sign_recordItem"
      v-for="(item, index) in sign_record"
      :key="index"
    >
      <p class="month">{{ item.month }}</p>
      <ul class="condition_recordlist">
        <li v-for="(item, index) in item.list" :key="index">
          <div class="time">
            <span class="time_title">{{ item.title }}</span>
            <span class="time_day">{{ item.add_time }}</span>
          </div>
          <span class="integral">+{{ item.number }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sign_record: null,
    };
  },
  created() {
    this.axios.get("/api/sign/month?page=1&limit=5").then((response) => {
      this.sign_record = response.data.data;
    });
  },
};
</script>

<style lang="less">
.sign_record {
  width: 100%;
  .sign_recordItem {
    width: 100%;
    .month {
        font-size: 12px;
        color: #666666;
        padding: 15px;
    }
    .condition_recordlist {
      width: 100%;
      padding: 0 15px;
      background-color: #fff;
      > li {
        width: 100%;
        height: 65px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #f0f0f0;
        &:last-child {
          border-bottom: 1px solid #f0f0f0;
        }
        .time {
          display: flex;
          flex-direction: column;
          .time_day {
            margin-top: 5px;
            font-size: 12px;
            color: #cabbbb;
          }
        }
        .integral {
          color: #fc4141;
        }
      }
    }
  }
}
</style>